<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="分析项目" prop="fxxm">
        <el-input
          v-model="queryParams.fxxm"
          placeholder="请输入分析项目"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报表名称" prop="bbmc">
        <el-input
          v-model="queryParams.bbmc"
          placeholder="请输入报表名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker  :editable="false" clearable size="small"
          v-model="queryParams.createTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['Laboratory_yxs:yxs:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['Laboratory_yxs:yxs:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['Laboratory_yxs:yxs:remove']"
        >删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['Laboratory_yxs:yxs:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="yxsList" @selection-change="handleSelectionChange" max-height="550">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="创建时间" align="center" prop="id" />
      <el-table-column label="分析项目" align="center" prop="fxxm" />
      <el-table-column label="检测依据" align="center" prop="jcyj" />
      <el-table-column label="检测方法" align="center" prop="jcff" />
      <el-table-column label="取样量(ml)" align="center" prop="qyl" />
      <el-table-column label="仪器名称" align="center" prop="yqmc" />
      <el-table-column label="仪器型号" align="center" prop="yqxh" />
      <el-table-column label="波长、比色皿" align="center" prop="bcbsm" />
      <el-table-column label="定容体积" align="center" prop="drtj" />
      <el-table-column label="计算参数" align="center" prop="jscs" />
      <el-table-column label="计算公式" align="center" prop="jsgs" />
      <el-table-column label="报表编号" align="center" prop="bbbh" />
      <el-table-column label="报表名称" align="center" prop="bbmc" />
      <el-table-column label="审核人" align="center" prop="shr" />
      <el-table-column label="检验人" align="center" prop="jyr" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
        <template slot-scope="scope">
          <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['Laboratory_yxs:yxs:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['Laboratory_yxs:yxs:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改分光光度法检验原始记录（亚硝酸盐）对话框 -->
    <!-- <el-dialog v-myFullscreen :title="title" :visible.sync="open" width="700px" append-to-body> -->
    <el-dialog v-myFullscreen :title="title" :visible.sync="open" width="700px" append-to-body custom-class="myDialog" fullscreen>
      <TableHeader
        @nameChange="nameChange"
        :data="{
          mainTitle: '分光光度法检验原始记录（亚硝酸盐）',
          company: '青岛崂山矿泉水有限公司',
          code: form.bbbh,
        }"
      />
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="6">
              <el-form-item label="分析项目" prop="fxxm">
                <el-input v-model="form.fxxm" placeholder="请输入分析项目" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="检测依据" prop="jcyj">
                <el-input v-model="form.jcyj" placeholder="请输入检测依据" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="检测方法" prop="jcff">
                <el-input v-model="form.jcff" placeholder="请输入检测方法" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="取样量(ml)" prop="qyl">
                <el-input v-model="form.qyl" placeholder="请输入取样量(ml)" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="仪器名称" prop="yqmc">
                <el-input v-model="form.yqmc" placeholder="请输入仪器名称" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="仪器型号" prop="yqxh">
                <el-input v-model="form.yqxh" placeholder="请输入仪器型号" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="波长、比色皿" prop="bcbsm">
                <el-input v-model="form.bcbsm" placeholder="请输入波长、比色皿" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="定容体积(mL)" prop="drtj">
                <el-input v-model="form.drtj" placeholder="请输入定容体积" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
              <el-form-item label="计算参数" prop="jscs">
                <el-input v-model="form.jscs" placeholder="请输入计算参数" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="计算公式" prop="jsgs">
                <el-input v-model="form.jsgs" placeholder="请输入计算公式" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="报表编号" prop="bbbh">
                <el-input v-model="form.bbbh" placeholder="请输入报表编号" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="报表名称" prop="bbmc">
                <el-input v-model="form.bbmc" placeholder="请输入报表名称" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="审核人" prop="shrPerson">
                <el-input v-model="form.shrPerson" placeholder="请输入审核人" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="检验员" prop="jyy">
                <el-input v-model="form.jyy" placeholder="请输入检验员" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注" :disabled="openDisabled" />
              </el-form-item>
          </el-col> -->
        </el-row>
        <br>
        <el-divider content-position="center">分光光度法检验原始记录（亚硝酸盐）子1信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddQualityLabFgdYxsSub1" :disabled="openDisabled">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteQualityLabFgdYxsSub1" :disabled="openDisabled">删除</el-button>
          </el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-table :data="qualityLabFgdYxsSub1List" :row-class-name="rowQualityLabFgdYxsSub1Index" border @selection-change="handleQualityLabFgdYxsSub1SelectionChange" ref="qualityLabFgdYxsSub1">
          <el-table-column type="selection" width="50" align="center" />
          <!-- <el-table-column label="序号" align="center" prop="index" width="50"/> -->
          <el-table-column label="标准系列 序号" prop="xh">
            <template slot-scope="scope">
                <el-input v-model="scope.row.xh" placeholder="请输入标准系列序号" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="加标量(ml)" prop="jbl">
            <template slot-scope="scope">
                <el-input v-model="scope.row.jbl" placeholder="请输入加标量" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="吸光度X(A)" prop="xgd">
            <template slot-scope="scope">
                <el-input v-model="scope.row.xgd" placeholder="请输入吸光度" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="浓度y(mg/L)" prop="nd">
            <template slot-scope="scope">
                <el-input v-model="scope.row.nd" placeholder="请输入浓度" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <!-- <el-table-column label="分析项目" prop="fxxm">
            <template slot-scope="scope">
                <el-input v-model="scope.row.fxxm" placeholder="请输入分析项目" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark">
            <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="请输入备注" :disabled="openDisabled"/>
            </template>
          </el-table-column> -->
        </el-table>
        <el-divider content-position="center"></el-divider>

        <!-- 计算公式 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="计算参数" prop="jscs">
              <el-input v-model="form.jscs" placeholder="请输入计算参数" :disabled="openDisabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
              <el-form-item label="计算公式" prop="jsgs">
                <el-input v-model="form.jsgs" placeholder="请输入计算公式" :disabled="openDisabled" />
              </el-form-item>
          </el-col>
        </el-row>

<br>
        <el-divider content-position="center">分光光度法检验原始记录（亚硝酸盐）子2信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddQualityLabFgdYxsSub2" :disabled="openDisabled">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteQualityLabFgdYxsSub2" :disabled="openDisabled">删除</el-button>
          </el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-table 
          :data="qualityLabFgdYxsSub2List" 
          :row-class-name="rowQualityLabFgdYxsSub2Index" 
          @selection-change="handleQualityLabFgdYxsSub2SelectionChange" 
          border
          ref="qualityLabFgdYxsSub2">
          <el-table-column type="selection" width="50" align="center" />
          <!-- <el-table-column label="序号" align="center" prop="index" width="50"/> -->
          <el-table-column label="样品名称" prop="ypmc">
            <template slot-scope="scope">
                <el-input v-model="scope.row.ypmc" placeholder="请输入样品名称" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="生产批次/取样日期" prop="scpc">
            <template slot-scope="scope">
                <el-input v-model="scope.row.scpc" placeholder="请输入生产批次/取样日期" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="检测日期" prop="jcrq">
            <template slot-scope="scope">
                <el-date-picker  :editable="false" clearable  v-model="scope.row.jcrq" type="date"  value-format="yyyy-MM-dd"  placeholder="选择检测日期" :disabled="openDisabled">
                </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="实验环境" prop="syhj">
            <template slot-scope="scope">
                <el-input v-model="scope.row.syhj" placeholder="请输入温度" :disabled="openDisabled" size="mini"/>
                <!-- <el-input v-model="scope.row.sd" placeholder="请输入湿度" :disabled="openDisabled" size="mini"/> -->
            </template>
          </el-table-column>
          <el-table-column label="报告日期" prop="bgrq">
            <template slot-scope="scope">
                <el-date-picker  :editable="false" clearable  v-model="scope.row.bgrq" type="date"  value-format="yyyy-MM-dd"  placeholder="选择报告日期" :disabled="openDisabled">
                </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="吸光度" prop="xgd">
            <template slot-scope="scope">
                <el-input v-model="scope.row.xgd" placeholder="请输入吸光度" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="样品结果(mg/L)" prop="ypjg">
            <template slot-scope="scope">
                <el-input v-model="scope.row.ypjg" placeholder="请输入样品结果(mg/L)" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="检验人" prop="jyr">
            <template slot-scope="scope">
                <el-input v-model="scope.row.jyr" placeholder="请输入检验人" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <el-table-column label="审核人" prop="shr">
            <template slot-scope="scope">
                <el-input v-model="scope.row.shr" placeholder="请输入审核人" :disabled="openDisabled"/>
            </template>
          </el-table-column>
          <!-- <el-table-column label="备注" prop="remark">
            <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="请输入备注" :disabled="openDisabled"/>
            </template>
          </el-table-column> -->
        </el-table>
        <el-row class="mb8">
          <div label="备注">
            备注:&nbsp;&nbsp; 以下情况需要重新绘制标准曲线：<br />
            1、标准溶液使用3个月；<br />
            2、更换配套的溶液；<br />
            3、分光光度计出故障检修后。<br />
            要求相关系数r值三个九以上。
          </div>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer"  v-if="!openDisabled">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listYxs, getYxs, delYxs, addYxs, updateYxs } from "@/api/quality/laboratory/yxs";

export default {
  name: "Yxs",
  data() {
    return {
      //弹窗是否禁止编辑
      openDisabled: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedQualityLabFgdYxsSub1: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分光光度法检验原始记录（亚硝酸盐）表格数据
      yxsList: [],
      // 分光光度法检验原始记录（亚硝酸盐）子1表格数据
      qualityLabFgdYxsSub1List: [],
      // 分光光度法检验原始记录（亚硝酸盐）子2表格数据
      qualityLabFgdYxsSub2List: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        fxxm: null,
        bbmc: null,
        createTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询分光光度法检验原始记录（亚硝酸盐）列表 */
    getList() {
      this.loading = true;
      listYxs(this.queryParams).then(response => {
        this.yxsList = response.rows;
        console.log('22',response.rows)
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        fxxm: null,
        jcyj: null,
        jcff: null,
        qyl: null,
        yqmc: null,
        yqxh: null,
        bcbsm: null,
        drtj: null,
        jscs: null,
        jsgs: null,
        bbbh: 'LK-QF-LS1-10-012-11-01',
        bbmc: null,
        shrPerson: null,
        jyy: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null
      };
      this.qualityLabFgdYxsSub1List = [];
      this.qualityLabFgdYxsSub2List = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.openDisabled = false;
      this.open = true;
      this.title = "添加分光光度法检验原始记录（亚硝酸盐）";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.openDisabled = false;
      const id = row.id || this.ids
      getYxs(id).then(response => {
        this.form = response.data;
        this.qualityLabFgdYxsSub1List = response.data.qualityLabFgdYxsSub1List;
        this.qualityLabFgdYxsSub2List = response.data.qualityLabFgdYxsSub2List;
        this.open = true;
        this.title = "修改分光光度法检验原始记录（亚硝酸盐）";
      });
    },
    /** 查看按钮 */
    handleView(row) {
        this.reset();
        this.openDisabled = true;
        const id = row.id || this.ids
        getYxs(id).then(response => {
           this.form = response.data;
           this.qualityLabFgdYxsSub1List = response.data.qualityLabFgdYxsSub1List;
           this.qualityLabFgdYxsSub2List = response.data.qualityLabFgdYxsSub2List;
           this.open = true;
           this.title = "查看分光光度法检验原始记录（亚硝酸盐）";
        });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.qualityLabFgdYxsSub1List = this.qualityLabFgdYxsSub1List;
          this.form.qualityLabFgdYxsSub2List = this.qualityLabFgdYxsSub2List;
          if (this.form.id != null) {
            updateYxs(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addYxs(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除分光光度法检验原始记录（亚硝酸盐）编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delYxs(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
	/** 分光光度法检验原始记录（亚硝酸盐）子1序号 */
    rowQualityLabFgdYxsSub1Index({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 分光光度法检验原始记录（亚硝酸盐）子2序号 */
    rowQualityLabFgdYxsSub2Index({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 分光光度法检验原始记录（亚硝酸盐）子1添加按钮操作 */
    handleAddQualityLabFgdYxsSub1() {
      let obj = {};
      obj.xh = "";
      obj.jbl = "";
      obj.xgd = "";
      obj.nd = "";
      obj.fxxm = "";
      obj.remark = "";
      this.qualityLabFgdYxsSub1List.push(obj);
    },
    /** 分光光度法检验原始记录（亚硝酸盐）子2添加按钮操作 */
    handleAddQualityLabFgdYxsSub2() {
      let obj = {};
      obj.ypmc = "";
      obj.scpc = "";
      obj.jcrq = "";
      obj.syhj = "";
      obj.bgrq = "";
      obj.xgd = "";
      obj.jyr = "";
      obj.shr = "";
      obj.ypjg = "";
      obj.remark = "";
      this.qualityLabFgdYxsSub2List.push(obj);
    },
    /** 分光光度法检验原始记录（亚硝酸盐）子1删除按钮操作 */
    handleDeleteQualityLabFgdYxsSub1() {
      if (this.checkedQualityLabFgdYxsSub1.length == 0) {
        this.$alert("请先选择要删除的分光光度法检验原始记录（亚硝酸盐）子1数据", "提示", { confirmButtonText: "确定", });
      } else {
        this.qualityLabFgdYxsSub1List.splice(this.checkedQualityLabFgdYxsSub1[0].index - 1, 1);
      }
    },
    /** 分光光度法检验原始记录（亚硝酸盐）子2删除按钮操作 */
    handleDeleteQualityLabFgdYxsSub2() {
      if (this.checkedQualityLabFgdYxsSub2.length == 0) {
        this.$alert("请先选择要删除的分光光度法检验原始记录（亚硝酸盐）子2数据", "提示", { confirmButtonText: "确定", });
      } else {
        this.qualityLabFgdYxsSub2List.splice(this.checkedQualityLabFgdYxsSub2[0].index - 1, 1);
      }
    },
    /** 单选框选中数据 */
    handleQualityLabFgdYxsSub2SelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.qualityLabFgdYxsSub2.clearSelection();
        this.$refs.qualityLabFgdYxsSub2.toggleRowSelection(selection.pop());
      } else {
        this.checkedQualityLabFgdYxsSub2 = selection;
      }
    },
    /** 单选框选中数据 */
    handleQualityLabFgdYxsSub1SelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.qualityLabFgdYxsSub1.clearSelection();
        this.$refs.qualityLabFgdYxsSub1.toggleRowSelection(selection.pop());
      } else {
        this.checkedQualityLabFgdYxsSub1 = selection;
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('Laboratory_yxs/yxs/export', {
        ...this.queryParams
      }, `Laboratory_yxs_yxs.xlsx`)
    },
    //接收编号
    nameChange(e) {
      this.form.bbbh = e;
    },
  }
};
</script>